<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ace 编辑器复制代码示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }
        .editor-container {
            position: relative;
            margin: 20px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .editor-header {
            background-color: #2c2c2c;
            color: #ccc;
            padding: 8px 12px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .editor-header span {
            font-size: 16px;
        }
        .editor-header .copy-button {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 14px;
        }
        .editor-header .copy-button:hover {
            color: white;
        }
        .editor-header .copy-button .fa-copy {
            margin-right: 4px;
        }
        .editor-header .fa-check {
            display: none;
        }
        #editor {
            height: 200px;
        }
    </style>
</head>
<body>

    <div class="editor-container">
        <div class="editor-header">
            <span>html</span>
            <button class="copy-button" id="copyButton">
                <i class="fas fa-copy"></i> <span class="copy-text">复制代码</span>
                <i class="fas fa-check"></i> <span class="copied-text" style="display: none;">已复制</span>
            </button>
        </div>
        <div id="editor">
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
            &lt;title&gt;Document&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
            &lt;h1&gt;Hello World&lt;/h1&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/theme-monokai.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-html.js"></script>
    <script>
        // 初始化 Ace 编辑器
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/html");
        editor.setReadOnly(true); // 设置为只读模式，防止用户修改代码

        // 获取按钮元素
        const copyButton = document.getElementById('copyButton');
        const copyText = document.querySelector('.copy-text');
        const copiedText = document.querySelector('.copied-text');

        // 复制按钮点击事件
        copyButton.addEventListener('click', function() {
            // 获取编辑器中的代码
            const code = editor.getValue();

            // 创建一个临时的textarea元素来存放代码
            const tempTextarea = document.createElement('textarea');
            tempTextarea.value = code;
            document.body.appendChild(tempTextarea);

            // 选中并复制代码
            tempTextarea.select();
            document.execCommand('copy');

            // 移除临时的textarea元素
            document.body.removeChild(tempTextarea);

            // 切换复制按钮的图标和文字
            copyButton.querySelector('.fa-copy').style.display = 'none';
            copyButton.querySelector('.fa-check').style.display = 'inline';
            copyText.style.display = 'none';
            copiedText.style.display = 'inline';

            // 2秒后恢复原始状态
            setTimeout(() => {
                copyButton.querySelector('.fa-copy').style.display = 'inline';
                copyButton.querySelector('.fa-check').style.display = 'none';
                copyText.style.display = 'inline';
                copiedText.style.display = 'none';
            }, 2000);
        });
    </script>

</body>
</html>
